<template>
  <je-form ref="formRef" :model="formState" :rules="rules" autocomplete="off">
    <je-form-item label="编码" name="FUNCRELATION_CODE">
      <je-input
        v-model:value.trim="formState.FUNCRELATION_CODE"
        placeholder="请输入子功能编码"
        autocomplete="off"
      />
    </je-form-item>
    <je-form-item label="名称" name="FUNCRELATION_NAME">
      <je-input
        v-model:value.trim="formState.FUNCRELATION_NAME"
        placeholder="请输入子功能名称"
        autocomplete="off"
      />
    </je-form-item>
    <je-form-item label="类型" name="FUNCRELATION_RELYONTYPE">
      <je-select
        v-model:value="formState.FUNCRELATION_RELYONTYPE"
        :get-popup-container="getPopupContainer"
        config-info="JE_FUNC_CHILD_TYPE,formState.FUNCRELATION_RELYONTYPE,code,S"
        :querys="[
          {
            code: 'DICTIONARYITEM_ITEMCODE',
            type: 'notIn',
            value: ['func'],
          },
        ]"
      >
      </je-select>
    </je-form-item>
  </je-form>
</template>

<script>
  import { ref, toRefs, reactive, defineComponent } from 'vue';
  import { Form, Input, Select } from '@jecloud/ui';

  export default defineComponent({
    name: 'AddChild',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelect: Select,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['changeModal'],
    setup() {
      const state = reactive({
        title: '添加子功能',
        formRef: ref(),
        formState: {
          FUNCRELATION_CODE: '',
          FUNCRELATION_NAME: '',
          FUNCRELATION_RELYONTYPE: '',
        },
        rules: {
          FUNCRELATION_CODE: [
            { required: true, message: '请输入子功能编码' },
            { max: 40, message: '不能大于40个字符' },
            {
              pattern: '^[A-Z]{1}[A-Z_0-9]{0,100}$',
              message: '子功能编码由大写字母、下划线、数字组成,且首位为字母',
            },
          ],
          FUNCRELATION_NAME: [{ required: true, message: '请输入子功能名称' }],
          FUNCRELATION_RELYONTYPE: [{ required: true, message: '请输入子功能类型' }],
        },
      });
      const getPopupContainer = () => {
        return document.body;
      };
      return {
        ...toRefs(state),
        getPopupContainer,
      };
    },
  });
</script>
<style lang="less" scoped></style>
